<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>启动页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			#close {
				position: absolute;
				width: 160px;
				left: 50%;
				margin-left: -80px;
				bottom: 15%;
				padding: 10px;
				color: #fff;
				border-color: #fff;
			}
			
			.item-logo {
				width: 100%;
				height: 100%;
				text-align: center;
			}
			
			.item-logo a {
				width: 150px;
				height: 150px;
				display: block;
				margin: 0px auto;
				padding-top: 100px;
			}
			
			.mui-slider .mui-slider-group .mui-slider-item img {
				animation: name .5s;
			}
			
			.bg_img {
				height: 100%;
			}
			
			@keyframes name {
				0% {
					width: 50px;
					opacity: 0;
				}
				10% {
					width: 60px;
				}
				20% {
					width: 70px;
					opacity: 0.2;
				}
				30% {
					width: 80px;
				}
				40% {
					width: 90px;
					opacity: 0.4;
				}
				50% {
					width: 100px;
				}
				60% {
					width: 110px;
					opacity: 0.6;
				}
				70% {
					width: 120px;
				}
				80% {
					width: 130px;
					opacity: 0.8;
				}
				90% {
					width: 140px;
				}
				100% {
					width: 150px;
					opacity: 1;
				}
			}
		</style>
	</head>

	<body>
		<div id="slider" class="mui-slider mui-fullscreen" style="background-color: black;">
			<div class="mui-slider-group">
				<!-- 第一张 -->
				<div class="mui-slider-item">
					<div class="item-logo">
						<img class="bg_img" src="" />
						<a href="#" class="animate guide-show">
							<img class="animated bounceInDown" src="images/qdd.png" />
						</a>

					</div>
				</div>
				<div class="animate">
					<a id='close' class="mui-btn mui-btn-warning mui-btn-outlined" href="index.html">立即体验</a>
				</div>

			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index_d.js" type="text/javascript" charset="utf-8"></script>

		<script>
			document.addEventListener('plusready', plusReady, false);

			function plusReady() {
				plus.runtime.getProperty(plus.runtime.appid, function(inf) {
					//	 // 当前版本
					var wgtVersion = inf.version;
					$.ajax({
						url: urlcom + "api/edition",
						type: 'get',
						success: function(data) {
							// 如果有新版本，则提示需要更新
							if(data.data.edition > wgtVersion) {

								downloadWgt(data.data.url); // 下载wgt方法
							} else {
								return;
							}
						},
						error: function(err) {}
					});
				});
			}

			function installWgt(path) {
				plus.nativeUI.showWaiting("安装wgt文件...");
				plus.runtime.install(path, {}, function() {
					plus.nativeUI.closeWaiting();
					plus.nativeUI.alert("应用资源更新完成！", function() {
						plus.runtime.restart();
					});
				}, function(e) {
					plus.nativeUI.closeWaiting();
					plus.nativeUI.alert("安装wgt文件失败[" + e.code + "]：" + e.message);
				});
			}

			function downloadWgt(urls) {
				// 更新文件 wgt 文件地址
				var wgtUrl = urls;
				plus.nativeUI.showWaiting("正在更新...");
				plus.downloader.createDownload(wgtUrl, {
					filename: "_doc/update/"
				}, function(d, status) {
					if(status == 200) {
						installWgt(d.filename); // 安装wgt方法
					} else {
						plus.nativeUI.alert("下载wgt失败！");
					}
					plus.nativeUI.closeWaiting();
				}).start();
			}

			mui.back = function() {};
			mui.plusReady(function() {
				if(mui.os.ios) {
					plus.navigator.setFullscreen(true);
				}
				plus.navigator.closeSplashscreen();
			});

			//图片切换时，触发动画
			document.querySelector('.mui-slider').addEventListener('slide', function(event) {
				//注意slideNumber是从0开始的；
				var index = event.detail.slideNumber + 1;
				if(index == 2 || index == 3) {
					var item = document.getElementById("tips-" + index);
					if(item.classList.contains("mui-hidden")) {
						item.classList.remove("mui-hidden");
						item.classList.add("guide-show");
					}
				}
			});

			
		</script>
	</body>

</html>